<template>
  <!-- 弹出层 -->
  <el-dialog :title='showTitle' :visible='showDialog' @close='btnCancel' >
    <el-form ref="deptForm" :model='forData' :rules='rules' label-width='120px'>
      <el-form-item prop="name" label='部门名称'>
        <el-input v-model="forData.name" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item prop="code" label='部门编码'>
        <el-input v-model="forData.code" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item  prop="manager" label='部门负责人'>
        <!-- 下拉菜单 -->
        <el-select @focus="getEmployeeSimple" v-model="forData.manager" style="width:80%" placeholder="请选择">
          <el-option v-for="item in peoples" :key="item.id" :label="item.username" :value="item.username"/>
        </el-select>
      </el-form-item>
      <el-form-item prop="introduce" label='部门介绍'>
        <el-input v-model="forData.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3"/>
      </el-form-item>
    </el-form>
    <!-- el-dialog 放置底部操作栏 插槽  具名插槽 -->
    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button type='primary' size="small" @click="btnok">确定</el-button>
        <el-button size="small" @click="btnCancel" >取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { getDpartments, addDpartments, getDepartDetail, updateDepartments } from '@/api/departments'
import { getEmployeeSimple } from '@/api/employees'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    treeNode: {
      type: Object,
      default: null
    }
  },
  data () {
    // 定义一个函数，查看同级部门是否有重复的名称  value --- 需要进行判断的值
    const checkNameRepeat = async(rule, value, callback ) => {
    // 得到最新的组织架构信息
    const { depts } = await getDpartments()
    let child = false
    if (this.forData.id) {
      // 编辑的数据在 数据库里面都有
      // 有 id 编辑模式 找出同级别下的所有 && 除去自己  再去some是否有name一样的
      child = depts.filter(item => item.pid === this.treeNode.pid && item.id !== this.treeNode.id).some(item => item.name === value)
    } else {
    // 得到所有数据，查找部门子节点 名字不能重复
    child = depts.filter(item => item.pid === this.treeNode.id).some(item => item.name === value)
    }
    // 找到为 true 表示有重复的 提示消息
    child ? callback(new Error(`同级别下${value}重复了`)) : callback()
    }
    // 定义函数 部门编码在整个模块中都不允许重复
    const checkCodeRepeat = async(rule, value, callback) => {
    // 得到最新的组织架构信息
    const { depts } = await getDpartments()
    let child = false
    if (this.forData.id) {
      // 有 id 编辑模式
      child = depts.filter(item => item.id !== this.forData.id).some(item => item.code === value && value)
    } else {
    // code 有可能为空
    child = depts.some(item => item.code === value && value )
    }
    child ? callback(new Error(`部门编码${value}已经存在`)) : callback()
    }
    return {
      // 表单数据
      forData: {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门负责人
        introduce: '' // 部门介绍
      },
      // 校验规则
      rules: {
        name: [{required: true, message: '部门名称不能为空', trigger: 'blur'},
        { min: 1, max: 50, message: '部门名称要求1-50个字符', trigger: 'blur' }, {
          trigger: 'blur', validator: checkNameRepeat }],
        code: [{required: true, message: '部门编码不能为空', trigger: 'blur'},
        { min: 1, max: 50, message: '部门名称要求1-50个字符', trigger: 'blur' }, {
          trigger: 'blur', validator: checkCodeRepeat}],
        manager: [{required: true, message: '部门负责人不能为空', trigger: 'blur'}],
        introduce: [{required: true, message: '部门介绍不能为空', trigger: 'blur'},
        { min: 1, max: 50, message: '部门名称要求1-300个字符', trigger: 'blur' }]
      },
      peoples: [] // 员工简单信息
    }
  },
  created () {},
  methods: {
    async getEmployeeSimple () {
      this.peoples = await getEmployeeSimple()
    },
    // 点击确定
    btnok() {
      this.$refs.deptForm.validate(async (isOk) => {
        if (isOk) {
          // 表示通过
          // 分清楚模式
          if (this.forData.id) {
            // 有 id 编辑模式
            await updateDepartments(this.forData)
          } else {
          // 没 id 新增
          // 调用接口，添加父部门的id
          await addDpartments({ ...this.forData, pid: this.treeNode.id})
          }
          // 成功通知父组件 更新页面 重新调用接口
          this.$emit('addDepts')
          // 关闭 弹层
          this.$emit('update:showDialog', false)
        }
      })
    },
    // 获取部门详情
    async getDepartDetail (id) {
      this.forData = await getDepartDetail(id)
      // 因为是父组件调用子组件的方法， 先设置 node数据，直接调用方法
      // props 传值是异步的 所有不是 this.treeroot.id
    },
    // 点击取消
    btnCancel() {
      // 重置数据  因为resetFields 只能重置 表单上的数据 非表单上的 比如 编辑中id 不能重置
      this.forData = {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门负责人
        introduce: '' // 部门介绍
      }
      this.$refs.deptForm.resetFields() // 重置校验字段
      this.$emit('update:showDialog', false) // 关闭弹层
    }
  },
  computed: {
    showTitle () {
      return this.forData.id ? '编辑部门' : '新增子部门'
    }
  }
}
</script>

<style scoped>

</style>